<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<!--<link th:href="@{/ajax/libs/webuploader/webuploader.css}" rel="stylesheet"/>
<link th:href="@{/css/demo/webuploader-demo.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css}" rel="stylesheet"/>-->
<link th:href="@{/css/plugins/dropzone/basic.css}" rel="stylesheet"/>
<link th:href="@{/css/plugins/dropzone/dropzone.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">
<body class="white-bg">
<div class="ibox-content">
    <div class="form-horizontal m">
        <div class="form-group">
            <div class="alert alert-info" role="alert">Note: when uploading in bulk, please note that the picture must be centered in the frame and cannot touch the border line of the cell. Only this template table is supported for uploading</b>
                <button onclick="DownloadXls()" style="float: right" class="btn btn-success  dim" type="button"><i class="fa fa-upload"></i> Download the template
            </button></div>
        </div>

        <div class="form-group">
            <form id="my-awesome-dropzone" class="dropzone">
                <div class="dropzone-previews"></div>

            </form>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">remark：</label>
            <div class="col-sm-9">
                <textarea type="text" name="" class="form-control" id="order_bz" placeholder="Please enter text"></textarea>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12 col-sm-offset-3">
                <button type="button" class="btn btn-primary" onclick="upload()">submit</button>
                <button onclick="$.modal.close()" class="btn btn-danger" type="button">close</button>
            </div>
        </div>
    </div>

    <div style="display: none" id="error_layer">
        <table id="bootstrap-table-err" data-mobile-responsive="true">
            <thead>
            <tr>
                <th data-field="low">row</th>
                <th data-field="row">column</th>
                <th data-field="errorValue">error message</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<div th:include="include::footer"></div>
<script type="text/javascript">
    var prefix = ctx + "module/ordersHead"
    $("#form-ordersHead-add").validate({
        rules:{
            xxxx:{
                required:true,
            },
        },
        submitHandler: function(form) {
            $.operate.save(prefix + "/add", $('#form-ordersHead-add').serialize());
        }
    });
</script>
<script>
    //var BASE_URL = [[@{/ajax/libs/webuploader}]];
</script>
<!--<script th:src="@{/ajax/libs/webuploader/webuploader.js}"></script>
<script th:src="@{/js/demo/webuploader-demo.js}"></script>-->
<!-- DROPZONE -->
<script th:src="@{/js/plugins/dropzone/dropzone.js}"></script>
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script>
    var jsonObj = {};
    jsonObj.excleList = [];

    Dropzone.autoDiscover = false;
    $(".dropzone").dropzone({
        url: ftp_url+"/module/products/FileUploadServletAsXls", //必须填写
        method:"post",  //也可用put
        paramName:"exclefile", //默认为file
        addRemoveLinks: true,
        maxFiles:10,//一次性上传的文件数量上限
        maxFilesize: 20, //MB
        acceptedFiles: ".xls,.xlsx", //上传的类型
        parallelUploads: 3,
        dictMaxFilesExceeded: "You can upload up to 10 files！",
        dictResponseError: 'File upload failed!',
        dictInvalidFileType: "You cannot upload this type of file, the file type can only be*.xls,*.xlsx。",
        dictFallbackMessage:"The browser is not supported",
        dictFileTooBig:"File size too large to upload file maximum support.",
        init:function() {
            this.on("addedfile", function (file) {
                //上传文件时触发的事件
                var myDropzone = this;
                var fileName = file.name;
                //
                var arr = jsonObj.excleList;
                /*for( var i = 0; i < arr.length; i++ ){
                    if( arr[i].fileName == fileName ){
                        var index = layer.alert("上传列表存在重复文件！如确认需要上传，请将文件改名后进行操作。",{
                            skin: 'layui-layer-lan',
                            closeBtn: 0
                        },function () {
                            myDropzone.removeFile(file);
                            layer.close(index);
                        });
                        break;
                    }
                }*/
                return;
            });
            this.on("queuecomplete", function (file) {
                //上传完成后触发的方法
            });
            this.on("removedfile", function (file) {
                //删除文件时触发的方法
                this.setupEventListeners();
                var fileName = file.name;
                var arr = jsonObj.excleList;
                for( var i = arr.length-1; i >= 0; i-- ){
                    if( arr[i].fileName == fileName ){
                        if(this.getAcceptedFiles().length === this.options.maxFiles){break;}
                        jsonObj.excleList.splice( i, 1 );
                        break;
                    }
                }
            });
            this.on("success", function(file,data){
                var fileName = data.msg;
                var fileUrl = data.detail;
                var excleObj = {};

                excleObj.fileName = fileName;
                excleObj.fileUrl = fileUrl;
                jsonObj.excleList.push(excleObj);
            });
            this.on('maxfilesreached', function() {
                this.removeEventListeners();
            });
            this.on('cancled', function (file) {

            });
            this.on('sending', function (file) {

            });
        }
    });




    function upload(){
        if( jsonObj.excleList.length == 0 ){
            layer.alert("Please upload at least one Excel file。",{
                skin: 'layui-layer-lan',
                closeBtn: 1
            });
            return;
        }
        $.ajax({
            url: '/module/products/uploadProduct',
            dataType: 'json',
            type: 'POST',
            data: {
                'list' : JSON.stringify(jsonObj.excleList),
                'bz' : $("#order_bz").val()
            },
            success: function(data){

                if (data.code == 120){
                    var errorList = JSON.parse(data.msg.toString());

                    $('#bootstrap-table-err').bootstrapTable({
                        data: errorList,
                        height: "250"
                    });
                    //自定页
                    parent.layer.open({
                        type: 1,
                        skin: 'layui-layer-demo', //样式类名
                        closeBtn: false, //不显示关闭按钮
                        shift: 2,
                        shadeClose: true, //开启遮罩关闭
                        area: ['420px', '240px'], //宽高
                        content: $('#error_layer').html()
                    });

                }else {
                    $.operate.saveSuccess(data);
                }

            },
            error: function (data) {
                $.modal.alertError("system error");
            }
        });
    }
    
    function DownloadXls() {
        location.href = '';
        var url = "/module/products/exportDownLoadExcel";
        var form = $("<form></form>").attr("action", url).attr("method", "post");
        form.appendTo('body').submit().remove();
    }
</script>
</body>
</html>
